<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="handleReset">
      <x-filter-item :label="'标题'">
        <el-input v-model="searchParams.title" :placeholder="'请输入'" clearable maxlength="100"></el-input>
      </x-filter-item>
      <x-filter-item :label="'询价单号'">
        <el-input v-model="searchParams.number" :placeholder="'请输入'" clearable maxlength="100"></el-input>
      </x-filter-item>
      <x-filter-item :label="'状态'">
        <x-select
          :placeholder="$t('common.all')"
          v-model="searchParams.state"
          :options="dictOptions['srm_enquiry.state']"
          style="width: 100%"
          clearable
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="'日期'">
        <el-date-picker
          v-model="searchParams.createTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('common.to')"
          :start-placeholder="'开始时间'"
          :end-placeholder="'结束时间'"
          clearable
        >
        </el-date-picker>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <!-- <el-col :span="20">
            <el-button type="primary" :icon="buttonIcons('export')" @click="handleExportExcel"> {{ '导出' }}</el-button>
          </el-col> -->
          <el-col :span="24" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">{{
              selectDictLabel(dictOptions['srm_enquiry.state'], scope.row[item.prop])
            }}</span>
            <span v-else-if="item.prop === 'hasQute'">{{ scope.row[item.prop] ? '是' : '否' }}</span>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions, scope.row)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
  </x-page>
</template>

<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, TableListMixin, selectDictLabel } from '@package/utils'
  import { mapState } from 'pinia'
  import { columns, actions } from '@/modules/searchSource/config/enquiry.js'
  import { listUrl } from '@/modules/searchSource/api/enquiry.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import { pinias } from '@/common/pinia'

  const { login } = pinias
  export default {
    name: 'Enquiry',
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns,
        actions,
        listUrl,
        searchParams: {
          title: '',
          number: '',
          deptId: '',
          state: '',
          type: '',
          createTime: ''
        },
        tableData: [],
        srmDictKeys: ['srm_enquiry.state']
      }
    },
    computed: {
      ...mapState(login, ['user']),
      getActions() {
        return (actions, row) => {
          const { state } = row
          return actions.map((action) => {
            const { key } = action
            switch (state) {
              case 1: // 报价中
                action.disabled = !['quote', 'detail'].includes(key)
                break
              default:
                action.disabled = !['detail'].includes(key)
                break
            }
            return action
          })
        }
      }
    },
    mounted() {},
    methods: {
      buttonIcons,
      selectDictLabel,
      handleReset() {
        this.searchParams = {
          title: '',
          number: '',
          deptId: '',
          state: '',
          type: '',
          createTime: ''
        }
        this.resetSearch()
      },
      handleSearch(val) {
        const { number, state, deptId, type, createTime, title } = this.searchParams
        this.queryParam = {
          ...val,
          title,
          number,
          state,
          beginTime: createTime ? `${createTime[0]} 00:00:00` : '',
          endTime: createTime ? `${createTime[1]} 23:59:59` : ''
        }
        this.loadData()
      },
      // 询价发送
      async handleEnquirySend(id) {
        const { code, msg } = await apiPostEnquirySend([id])
        if (code === EnumApiCode.Success) {
          this.$message.success('发送成功')
          this.loadData()
        } else {
          this.$message.error(msg)
        }
      },
      async handleActions({ key, data }) {
        const { id } = data
        switch (key) {
          case 'detail':
            this.$router.push({
              name: 'EnquiryDetail',
              query: {
                id
              }
            })
            break
          case 'quote':
            this.$router.push({
              name: 'EnquiryDetail',
              query: {
                id,
                quoteSign: true
              }
            })
            break
          case 'delay':
            break
          case 'cancel':
            break
          case 'viewQuotation':
            this.$router.push({
              name: 'QuotationDetail',
              query: {
                id
              }
            })
            break
          default:
            break
        }
      },
      handleExportExcel() {
        this.handleExport('test')
      }
    }
  }
</script>

<style scoped></style>
